<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      :title="t('routes.demo.documentWorkPlace.importSet')"
      @register="register"
      @ok="handleSubmit"
      :destroyOnClose="true"
      :minHeight="350"
      :width="600"
    >
      <BasicForm @register="registerForm" />
      <!-- 上传文件框 -->
      <UploadDragger
        v-model:fileList="fileList"
        :multiple="true"
        name="files"
        :customRequest="customUpload"
        :beforeUpload="beforeUpload"
        @change="handleChange"
      >
        <p class="ant-upload-drag-icon"></p>
        <p class="ant-upload-text">{{ t('routes.demo.documentWorkPlace.dropFilesHere') }}</p>
        <p class="ant-upload-hint">{{
          t('routes.demo.documentWorkPlace.supportSingleOrBatchUpload')
        }}</p>
      </UploadDragger>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Upload } from 'ant-design-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { getImportForm } from './tableData';
  import { importFile } from '/@/api/demo/document';

  const emit = defineEmits(['register', 'success']);

  const UploadDragger = Upload.Dragger;
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const FolderId = ref<string>('');
  const fileList = ref<any[]>([]);

  // 提交
  async function handleSubmit() {
    try {
      setModalProps({ confirmLoading: true });
      clearModal();
      emit('success');
      closeModal();
    } finally {
      clearModal();
      setModalProps({ confirmLoading: false });
    }
  }

  const clearModal = () => {
    fileList.value = [];
  };

  // 上传
  const handleChange = (info: any) => {
    const status = info.file.status;
    if (status === 'done') {
      createMessage.success(`${info.file.name} 文件上传成功`);
    } else if (status === 'error') {
      createMessage.error(`${info.file.name} 文件上传失败`);
    }
  };

  const beforeUpload = () => {
    const data = getFieldsValue();
    if (data.DocType !== undefined) {
      return true;
    } else {
      createMessage.error(t('routes.demo.documentWorkPlace.fileTypePlaceholder'));
      return false;
    }
  };

  const customUpload = (e: any) => {
    let DocType = getFieldsValue().DocType === undefined ? '' : getFieldsValue().DocType;
    let DhType = getFieldsValue().DhType;
    importFile(DocType, DhType, FolderId.value, e)
      .then((res) => {
        e.onSuccess(res, e);
      })
      .catch((err) => {
        e.onError(err);
      });
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    FolderId.value = data.treeKey;
    resetFields();
    setModalProps({ confirmLoading: false });
  });

  // 初始化表格
  const [registerForm, { resetFields, getFieldsValue }] = useForm({
    labelCol: { span: 24 },
    wrapperCol: { span: 24 },
    schemas: getImportForm(),
    showActionButtonGroup: false,
  });
</script>
